<template>
<div class="mine-container mine-writing-container">
   <div class="mine-wrap">
    <div class="mine-content">
      <div class="writing-title">
         <h3 class="title-name">标题：</h3>
         <input type="text" class="title-input" v-model="title"></input>
      </div>
      <div class="main">
         <h3>正文内容：</h3>
         <div class="textarea" contenteditable id="content"></div>
      </div>
      <div class="check-image">
           <div class="icon">
              <i></i>
              <input type="file" name="" @change="upload($event)">
            </div>
            文章审核通过后可在“我话我心”栏目中查看
      </div>
      <div class="commit-wrap">
        <button @click="submit()">提交</button>
      </div>
     </div>
   </div>
</div>
</template>

<script>
     import {
       STORY_PUBLISH,
       UPLOAD_IMAGE,
       STORY_DETAIL,
       STORY_EDIT
     } from '../../api';
    import auth from '../../utils/auth';

    export default {
        data(){
            return{
              title:'',
              content:''
            }
        },
        methods:{
          getStoryDetail(){
              this.$http.get({
                  url:STORY_DETAIL,
                  data:{
                      story_id:this.$route.query.id
                  }
              }).then((response)=>{
                  var result = response.data;
                  if (result.code === '0') {
                      this.title = result.data.title;
                      document.querySelector('#content').innerHTML = result.data.content;
                  }
                  else{
                      this.$toast.show(result.message)
                  }
              })
          },
          submit(){
            const {title} = this;

            const content = document.querySelector('#content').innerHTML
            if(!title){
              return this.$toast.show('标题不能为空');
            }
            if(!content){
              return this.$toast.show('内容不能为空');
            } 

            const formData = new FormData();
            formData.append('title',title);
            formData.append('content',content);

            let url = STORY_PUBLISH

            if(this.$route.query.id){
              url = STORY_EDIT;
              formData.append('story_id',this.$route.query.id);
            }

            this.$http.post(url,formData,{
              headers:{
                'Content-Type':'application/x-www-form-urlencoded;charset=utf-8'
              }
            })
            .then(res =>{
                if(res.data.code ==0){
                  this.$toast.show('保存成功');
                  setTimeout(()=>{
                     this.$router.go({
                        name:'mine.course'
                      })
                  },2E3)
                }else{
                  this.$toast.show(res.data.message);
                }
            })
          },
          upload(event){
            const formData = new FormData();
            formData.append('image',event.target.files[0]);

            this.$http.post(UPLOAD_IMAGE,formData,{
              headers:{
                'Content-Type':'multipart/form-data;'
              }
            })
            .then(res =>{
                if(res.data.code ==0){
                   document.querySelector('#content').innerHTML += '<img style="display:block;margin: 0 auto;max-width: 100%;max-height: 100%;" src="'+res.data.data+'"/>'
                }else{
                  this.$toast.show(res.data.message);
                }
            })
          }
        },
        ready(){
          if(this.$route.query.id){
            this.getStoryDetail();
          }
        }
    }
</script>
<style lang="sass">
  @import "../../sass/mine.scss";
</style>
